<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-元素的显示模式-块元素-行类元素</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        p{
            border: 3px solid red;
            width: 1000px;
            height: 100px;
            margin: 0 auto;
            display: block;
        }
        span,a{
            border: 1px solid blue;
            width: 100px;
            height: 35px;
            display: inline;
        }
    </style>
</head>
<body>
    <!-- 
        1.块元素
            div、h系列 、p、ul li nav footer header...
            特点:
                1) 独占一行
                2) 宽度默认是父元素宽度，高度由内容撑开
                3) 可设置宽高
            默认属性：
                display:block;
     -->
    <p>多地多人确诊热射病 已有人死亡</p>
    <hr>
    <!-- 
        2.行类元素(非块元素)
            a span em i b strong del ...
        特点：
            1)一行显示
            2)宽高由内容撑开
            3)不可设置宽高
        默认属性:
            display:inline
     -->
    <span>寒冰射手</span>
    <span>诺克萨斯</span>
    <span>武器大师</span>
    <a href="">毒蘑菇真毒啊</a>
    <hr>
    <!-- 
        3.行类块元素
            属性：
            display:inline-block;
            特点：
                1)一行显示多个
                2)可以设置宽高
     -->
    <!-- 需求：让a有固定的宽高，文字居中,排成一行 -->
    <style>
        .xian a{
            /* 将行类元素转为行类块元素 */
            display: inline-block;
            width: 150px;
            height: 150px;
            /* 垂直居中 */
            line-height: 150px;
            border: 1px dashed green;
            /* 水平居中 */
            text-align: center;
        }
    </style>
    <div class="xian">
        <a href="">莲湖区</a>
        <a href="">碑林区</a>
        <a href="">长安区</a>
        <a href="">未央区</a>
    </div>
</body>
</html>